import { useState } from 'react'
import inspirations from './inspirations.ts'
import FancyText from './FancyText'
import Color from './Color'
import styles from './UITree.module.scss'

export default function InspirationGenerator({ children }: { children: React.ReactNode }) {
    const [index, setIndex] = useState(0)
    const inspiration = inspirations[index]

    const next = () => {
        setIndex((index + 1) % inspirations.length)
    }

    return <>
        <p>You inspirationl {inspiration.type} is: </p>
        {inspiration.type === 'quote' ? <FancyText text={inspiration.value} /> : <Color value={inspiration.value} />}
        <button className={inspiration.type === 'quote' ? styles.btnWH : styles.btnMarginTop} onClick={next}>Inspire me agein</button>
        {children}
    </>
}